<template>
	<div :key="index" v-for="(item, index) in props.cardInfo" class="card-item">
		<!-- ------上半部分数据展示区------ -->
		<div :style="{ cursor: cToDetailPage ? 'pointer' : 'no-drop' }" @click="isJumpToDetailPage(item)">
			<!-- ------该盒子状态样式------ -->
			<global-svg-icon :icon-name="C_Status(item.status)" width="8px" height="8px" class="svg-icon"></global-svg-icon>
			<global-svg-icon :icon-name="C_Shadow(item.status)" width="111px" height="97px" class="status-shadow-box"></global-svg-icon>
			<!-- ------结束------ -->

			<div class="info-box">
				<div class="text-info">
					<p class="name" :title="item.boxName">{{ item.boxName }}</p>
					<div class="SNCode">{{ item.serial }}</div>
					<div class="cameraNum">
						<global-svg-icon icon-name="camera" width="16px" height="16px" style="vertical-align: middle"></global-svg-icon>

						{{ item.totalDeviceCount || 0 }}
					</div>
				</div>
				<div class="camera-box">
					<img :src="cameraBox" alt="" style="width: 97.7px; height: 80.5px" />
				</div>
			</div>
		</div>

		<!-- ------结束------ -->

		<!-- 操作片 -->
		<div class="operation-box">
			<div v-if="g6Permission.showBtn('reset')" @click="pageButtonClick('reset', item)">重启</div>
			<a-popover v-if="cShowMoreBtn" v-model:open="item.visible" placement="bottom" trigger="click">
				<template #content>
					<div class="flex-content">
						<a-button
							v-btnAuth="{ btn: 'alarm-conf', page: 'config-manage-boxes' }"
							block
							type="text"
							@click="pageButtonClick('alarm-conf', item)"
						>
							报警配置
						</a-button>
						<a-button
							v-btnAuth="{ btn: 'single-delete', page: 'config-manage-boxes' }"
							block
							type="text"
							@click="pageButtonClick('single-delete', item)"
						>
							删除
						</a-button>
					</div>
				</template>
				<div class="equipments-bottom_more">更多</div>
			</a-popover>

			<div v-if="false" class="tool-panel"></div>
		</div>
	</div>

	<!-- 在线授权 -->
	<a-modal
		v-model:open="useAlgoAuthHooks.onlineAuthVisible.value"
		title="在线授权 "
		:body-style="{ padding: '40px 32px 60px 32px' }"
		width="600px"
		:footer="null"
		:closable="false"
		:mask-closable="false"
	>
		<div v-if="!useAlgoAuthHooks.onlineAuthStatus.value" class="online-auth">
			<three-loading></three-loading>
			<p class="loading-text">正在获取授权文件，请稍等..</p>
		</div>
		<div v-else class="online-auth online-auth--success">
			<img src="@/global-assets/imgs/icon-success-fill.png" />
			<p class="status-text">授权成功</p>
			<a-button
				type="primary"
				@click="
					useAlgoAuthHooks.authComplete();
					refreshData();
				"
				>确定</a-button
			>
		</div>
	</a-modal>

	<!-- 离线授权 -->
	<a-modal
		v-model:open="useAlgoAuthHooks.offlineAuthVisible.value"
		title="离线授权"
		:body-style="{ padding: '40px 32px' }"
		:ok-button-props="{
			loading: useAlgoAuthHooks.offlineAuthLoading.value,
			disabled:
				!useAlgoAuthHooks.fileList.value.length || !useAlgoAuthHooks.fileList.value.filter((item: any) => item.status === 'done').length
		}"
		:footer="useAlgoAuthHooks.offlineAuthStatus.value ? null : undefined"
		:mask-closable="false"
		@ok="useAlgoAuthHooks.confirmOfflineAuth()"
		@cancel="useAlgoAuthHooks.authComplete()"
	>
		<div v-if="!useAlgoAuthHooks.offlineAuthStatus.value" class="offline-auth">
			<a-upload
				class="upload-component"
				:multiple="false"
				:file-list="useAlgoAuthHooks.fileList.value"
				:accept="'.lic,text/plain'"
				:max-count="1"
				:custom-request="useAlgoAuthHooks.customRequest"
				@change="useAlgoAuthHooks.handleChange"
			>
				<a-button>
					<upload-outlined></upload-outlined>
					上传授权文件
				</a-button>
				<template #removeIcon="{ file }">
					<span>
						<close-outlined v-if="file.status === 'uploading'" style="color: #fff"></close-outlined>
						<delete-outlined v-else style="color: #fff"></delete-outlined>
					</span>
				</template>
				<template #iconRender="{ file }">
					<link-outlined v-if="file.status === 'done'" style="color: rgba(61, 127, 233, 1)"></link-outlined>
					<file-outlined v-else-if="file.status === 'error'" style="color: rgba(250, 114, 96, 1)"></file-outlined>
					<reload-outlined v-else style="color: rgba(26, 111, 243, 1)"></reload-outlined>
				</template>
			</a-upload>
			<div class="remarks">
				请联系官方客服人员获取算法授权文件<br />
				客服电话：400-991-0655（周一至周五9:00-18:00）
			</div>
		</div>
		<div v-else class="offline-auth offline-auth--success">
			<img src="@/global-assets/imgs/icon-success-fill.png" />
			<p class="status-text">授权成功</p>
			<a-button
				type="primary"
				@click="
					useAlgoAuthHooks.authComplete();
					refreshData();
				"
				>确定</a-button
			>
		</div>
	</a-modal>
</template>

<script setup lang="ts" name="BoxesCardPage">
import { g6StorageValue, g6Permission } from 'glasssix-utils-ts';
import { TsCardInfo } from '../../../type';
import cameraBox from '@/global-assets/imgs/camera-box.png';
import { ThreeLoading } from '../../index';
import { useAlgoAuth } from '../BoxesTablePage/algoAuthHooks';
const props = withDefaults(defineProps<TsPros>(), {
	cardInfo: () => []
});
const emits = defineEmits<{
	(e: 'pageButtonClick', btnCode: string, record: Record<string, any>): void;
}>();
const useAlgoAuthHooks = useAlgoAuth(); // 授权hooks
type TsPros = {
	cardInfo: Array<TsCardInfo>;
};
const route = useRoute();

// 刷新页面数据
const refreshData = () => {
	emits('pageButtonClick', 'refreshData', {});
};

const cShowMoreBtn = computed(() => {
	const flags = [g6Permission.showBtn('alarm-conf'), g6Permission.showBtn('single-delete')];
	return flags.some((flag) => !!flag);
});
const cToDetailPage = computed(() => {
	const flatMenus = Array.isArray(g6StorageValue.get('session', 'flatMenus'))
		? (g6StorageValue.get('session', 'flatMenus') as TsGlobalType.TsRoleMenu[])
		: [];

	if (flatMenus.length) {
		// 当前菜单页面
		const curMenu = flatMenus.find((item: TsGlobalType.TsRoleMenu) => item.code === (route.name as string));
		if (!curMenu) {
			return false;
		}
		return !!curMenu.childList && !!curMenu.childList.length;
	}
	return false;
});

/**
 * -----------------卡片展示---------------------
 */
// 盒子状态卡片样式
const C_Status = computed(() => {
	return function name(status: string | number) {
		return status === 1 ? 'success-dot' : 'warning-dot';
	};
});
const C_Shadow = computed(() => {
	return function name(status: string | number) {
		return status === 1 ? 'success-shadow-box' : 'warning-shadow-box';
	};
});
/**
 * ------------------结束-----------------------
 */

/**
 * ------------------操作部分-----------------------
 */
// 页面按钮click
const pageButtonClick = async (btnCode: string, record: Record<string, any> = {}): Promise<void> => {
	record.visible = false;
	emits('pageButtonClick', btnCode, record);
};

// 判断是否进如详情页
const isJumpToDetailPage = (item: any): void => {
	cToDetailPage.value && pageButtonClick('details', item);
};

/**
 * ------------------结束-----------------------
 */
</script>

<style lang="less" scoped>
.drop-menu {
	:deep(.ant-dropdown-menu-item) {
		width: 100px;
		padding-left: 12px !important;

		&:hover {
			background-color: @mask01 !important;
		}
	}
}

.card-item {
	position: relative;
	display: flex;
	height: 148px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	background: radial-gradient(66.29% 107.13% at 0% 0%, rgba(38, 62, 131, 0.12) 0%, rgba(217, 217, 217, 0.02) 100%), #0f224e;
	box-shadow: 0 40px 180px 0 rgba(0, 0, 0, 0.35);
	cursor: pointer;
	flex-direction: column;
	justify-content: space-around;

	&:hover {
		border-color: @primary02;
	}

	.info-box {
		display: flex;
		height: 98px;
		border-bottom: 1px solid #20305b;
		padding: 16px 4px 14px 16px;
		justify-content: space-between;

		.text-info {
			display: flex;
			width: 133px;
			height: 72px;
			margin-right: 16px;
			flex-direction: column;

			.name {
				overflow: hidden;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: @text01;
			}

			.SNCode {
				overflow: hidden;
				font-size: 12px;
				line-height: 20px;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: @text03;
			}

			.cameraNum {
				width: 54px;
				height: 24px;
				margin-top: 6px;
				border: 1px solid #a4c7ea;
				border-radius: 11px;
				padding: 4px 6px;
				font-size: 12px;
				font-weight: 700;
				color: #ebf1f7;
				background: linear-gradient(
					90deg,
					rgba(140, 178, 226, 0.58) -0.22%,
					rgba(51, 113, 208, 0.58) 12.53%,
					rgba(28, 47, 80, 0.28) 53.43%,
					rgba(19, 25, 41, 0) 111.69%
				);
			}
		}
	}

	.operation-box {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;

		div {
			width: 100%;
			height: 100%;
			padding: 12px 16px;
			font-size: 14px;
			line-height: 24px;
			text-align: center;
			color: @text03;

			&:hover {
				background: @mask03;
			}

			.btn-text {
				display: inline-block;
				line-height: 24px;
			}
		}

		div:first-child {
			border-right: 1px solid #20305b;
		}
	}

	.svg-icon {
		position: absolute;
		top: 16px;
		right: 12px;
	}

	.status-shadow-box {
		position: absolute;
		top: 0;
		right: 0;
	}
}

.ant-btn-text {
	text-align: left !important;
}
</style>

<style lang="less">
.ant-popover {
	top: 370px !important;

	.ant-popover-inner {
		width: 108px;
		margin-left: 75px !important;
		// height: 72px;
		border: 1px solid rgba(43, 58, 80, 1);
		border-radius: 6px;
		padding: 0;
		line-height: 36px;
		background: rgba(14, 22, 36, 0.8);
		box-shadow:
			0 0 12px 0 rgba(0, 0, 0, 0.15),
			0 12px 30px 0 rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(15px);
	}
}

.ant-popover-arrow {
	display: none !important;
}

:where(.css-dev-only-do-not-override-1t97qq9).ant-popover .ant-popover-arrow {
	visibility: hidden !important;
}
</style>
